<template>
	<view class="">
		<view class="">
			isUserMedia:{{isUserMedia}}
		</view>
		<uv-button size="medium" type="primary" @click="onClick">
			<uv-text color="#FFF" text="优化重新生成" style="padding-right: 10px;padding-left: 10px;"></uv-text></uv-button>
		<view class="recorder"> </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isUserMedia: false, //false 代表初始化失败 true 成功
				stream: null,
				audio: null,
				recorder: null,
				chunks: [],
				startTime: 0,
			};
		},
		// //判断兼容问题和https并初始化
		// mounted() {
		// 	/**
		// 	 * 	error 事件的返回状态
		// 	 * 	100: 请在HTTPS环境中使用
		// 	 * 	101: 浏览器不支持
		// 	 *  201: 用户拒绝授权
		// 	 *  500: 未知错误
		// 	 * */
		// 	// if (window.location.origin.indexOf("https") === -1) {
		// 	// 	this.$emit("error", "100");
		// 	// 	throw "请在 https 环境中使用本插件。";
		// 	// }
		// 	// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
		// 	if (navigator.mediaDevices === undefined) {
		// 		navigator.mediaDevices = {};
		// 	}

		// 	// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
		// 	// 因为这样可能会覆盖已有的属性。这里我们只会在没有 getUserMedia 属性的时候添加它。
		// 	if (navigator.mediaDevices.getUserMedia === undefined) {
		// 		navigator.mediaDevices.getUserMedia = function(constraints) {
		// 			// 首先，如果有 getUserMedia 的话，就获得它
		// 			var getUserMedia =
		// 				navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

		// 			// 一些浏览器根本没实现它 - 那么就返回一个 error 到 promise 的 reject 来保持一个统一的接口
		// 			if (!getUserMedia) {
		// 				this.$emit("error", "101");
		// 				throw "当前浏览器不支持";
		// 			}

		// 			// 否则，为老的 navigator.getUserMedia 方法包裹一个 Promise
		// 			return new Promise(function(resolve, reject) {
		// 				getUserMedia.call(navigator, constraints, resolve, reject);
		// 			});
		// 		};
		// 	}
		// 	this.getRecorderManager();
		// },
		created() {
			this.witOn('resDetails', (data) => {
				console.log('data', data)
			})
		},
		methods: {
			onClick() {
				console.log(this);
				uni.$emit('resLoading', {
					type: 'submit',
					value: 11
				});
				// this.wits('resDetails', {
				// 	type: 'submit',
				// 	value: 11
				// });
			},
			//获取录音管理器并初始化
			getRecorderManager() {
				this.audio = document.createElement("audio");
				navigator.mediaDevices
					.getUserMedia({
						audio: true
					})
					.then((stream) => {
						console.log(stream.getTracks());
						this.isUserMedia = true;
						stream.getTracks().forEach((track) => {
							track.stop();
						});
					})
					.catch((err) => {
						this.onErrorHandler(err);
					});
			},
			start() {
				if (!this.isUserMedia) return console.log("设备不支持");
				//开始录制 初始化录音控件
				navigator.mediaDevices
					.getUserMedia({
						audio: true
					})
					.then((stream) => {
						this.startTime = new Date().getTime();
						this.stream = stream;
						this.recorder = new MediaRecorder(stream);
						this.recorder.ondataavailable = this.getRecordingData;
						this.recorder.onstop = this.saveRecordingData;
						this.recorder.start();
					})
					.catch((err) => {
						this.onErrorHandler(err);
					});
			},
			stop() {
				this.recorder && typeof this.recorder.stop === 'function' && this.recorder.stop();
				this.recorder && typeof this.recorder.getTracks === 'function' && this.stream.getTracks().forEach((
					track) => {
					track.stop();
				});
			},
			getRecordingData(e) {
				this.chunks.push(e.data);
			},
			saveRecordingData() {
				const blob = new Blob(this.chunks, {
						type: "audio/mpeg"
					}),
					localUrl = URL.createObjectURL(blob);

				const endTime = new Date().getTime();

				let duration = (endTime - this.startTime).toString().split("");
				duration.splice(duration.length - 2);
				duration.splice(duration.length - 1, 0, ".");
				duration = parseFloat(duration.join(""));

				const recorder = {
					data: blob,
					duration: duration,
					localUrl: localUrl,
				};
				this.$emit("success", recorder);
			},
			//返回的报错信息
			onErrorHandler(err) {
				console.log(err);
				if (err.name === "NotAllowedError") {
					this.$emit("error", "201");
					throw "用户拒绝了当前的浏览器实例的访问请求";
				}

				if (err.name === "NotReadableError") {
					this.$emit("error", "101");
					throw "当前浏览器不支持";
				}
				this.$emit("error", "500");
				throw `调用失败，${err}`;
			},
		},
		destroyed() {
			this.stop();
		},
	};
</script>
<style></style>